// src/pages/room/widgets/prescript/index.tsx
import styles from "@styles/room.module.scss";
import { RightOutline } from "antd-mobile-icons";
import {useLazyPrescriptionQuery} from "@store/apiSlice/consultApiSlice";
import {useState} from "react";
import {ImageViewer, Toast} from "antd-mobile";
import {useNavigate} from "react-router-dom";
import {PrescriptionStatus} from "@enums/room";
interface Props {
    // 处方
    prescription: Prescription;
}

export default function Prescript({ prescription }: Props) {
    // 用于获取处方单
    const [requestPrescription, { data }] = useLazyPrescriptionQuery();
    // 用于控制处方单图片是否显示
    const [visible, setVisible] = useState(false);
    // 用于页面跳转
    const navigate = useNavigate();
    // 购买按钮点击时执行
    const buy = () => {
        // 判断处方是否有效
        if (prescription.status === PrescriptionStatus.Invalid)
            return Toast.show({ content: "处方已失效" });
        // 如果处方对应的药品订单存在且没有支付
        if (prescription.orderId && prescription.status === PrescriptionStatus.NotPayment) {
            // 跳转到药品订单详情页面进行支付
            return navigate(`/medicine/${prescription.orderId}`);
        }
        // 跳转到预支付页面进行支付
        return navigate(`/medicinePay/${prescription.id}`);
    };
    return (
        <div className={styles.prescript}>
            <div className={styles.patient}>
                <div className={styles.info_1}>
                    <span>电子处方</span>
                    <i   onClick={() => {
                        requestPrescription(prescription.id).then(() => {
                            setVisible(true);
                        });
                    }}>
                        原始处方 <RightOutline />
                    </i>
                    <ImageViewer
                        image={data?.data.url}
                        visible={visible}
                        onClose={() => {
                            setVisible(false);
                        }}
                    />
                </div>
                <div className={styles.info_2}>
                    {prescription.name} {prescription.genderValue} {prescription.age}岁{" "}
                    {prescription.diagnosis}
                </div>
                <div className={styles.info_2}>开方时间：{prescription.createTime}</div>
            </div>
            <div className={styles.body}>
                {prescription.medicines.map((item) => (
                    <div className={styles.item} key={item.id}>
                        <div className={styles.name}>
                            <span>{item.name}</span>
                            <span>x{item.quantity}</span>
                        </div>
                        <div className={styles.content}>{item.usageDosag}</div>
                    </div>
                ))}
            </div>
            <button className={styles.buy} onClick={buy}>购买药品</button>
        </div>
    );
}